<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Xhr的事件</title>
  </head>
  <body>
    <!-- 主要学习 load事件、error事件、abort事件、timeout事件 -->
    <script>
      // 1、load事件 响应数据可用时触发 和addeventListener一样，IE6~8不支持load事件,
      const url = "https://www.imooc.com/api/http/search/suggest?words=js";
      const xhr = new XMLHttpRequest();
      xhr.onload = () => {
        if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304) {
          alert(xhr.responseText);
        } else {
          alert(xhr.statusText);
        }
      };
      //   xhr.addEventListener(load,()=>{
      //     if (
      //       ((xhr.status >= 200) & (xhr.status < 300)) ||
      //       xhr.status === 304
      //     ) {
      //       alert(xhr.responseText);
      //     } else {
      //       alert(xhr.statusText);
      //     }
      //   },false);
      xhr.open("GET", url, true);
      xhr.send(null);

      //   error事件
      // 请求发生错误时触发;
      const url = "https://www.imooc.com/api/http/search/suggest?words=js";
      const xhr = new XMLHttpRequest();
      xhr.onload = () => {
        if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304) {
          alert(xhr.responseText);
        } else {
          alert(xhr.statusText);
        }
      };

      xhr.addEventListener(
        "error",
        () => {
          console.log("error");
        },
        false
      );

      xhr.open("GET", url, true);
      xhr.send(null);

      //  abort事件
      xhr.addEventListener("abort", () => {
        console.log("abort事件");
      });
      //在abort方法使用时会调用该事件 IE10开始支撑

      //timeout事件
      xhr.timeout(10); //10ms后就报超时 此时就会触发timeout事件
      xhr.addEventListener("timeout", () => {
        console.log("timeout");
      });
    </script>
  </body>
</html>
